<!-- 表单新增 -->

<template>
  <WebForm path="add" class="LabelGroup-FormAdd">
    <FormInput label="分组名称" bind="labelGroupName" :max="4" required />

    <FormInput label="分组编码" bind="labelGroupCode" required />

    <FormTree label="上级分组" bind="parentId, parentName, parentCode, typeValue, typeLabel" :dict="treeDict" />

    <FormSelect
      label="标签类型"
      bind="typeValue, typeLabel, categoryValue, categoryLabel"
      :dict="DICT.TYPE"
      :disabled="add_one.parentId"
      required
    />

    <FormNum label="排序" bind="sortNumber" :min="1" :max="999" initMin noTip half required />

    <EasyRow>
      <FormColor label="背景颜色" bind="backgroundColor" noClear auto required />
      <div
        v-for="item in MAP.BG_COLOR_LIST"
        :key="item"
        :style="{ backgroundColor: item }"
        class="inFlexCC"
        @click="add_one.backgroundColor = item"
      >
        <i v-if="item === add_one.backgroundColor" class="el-icon-check" />
      </div>
    </EasyRow>

    <FormSlot label="地图预览">
      <div class="flexCC flexCol" :style="{ backgroundColor: add_one.backgroundColor }">
        <div>{{ nameTop || '-' }}</div>
        <div v-if="nameBottom">{{ nameBottom }}</div>
      </div>
    </FormSlot>

    <FormTextarea label="分组描述" bind="description" :max="100" required />
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'FormAdd',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixTree(), CORE.mixModal('add', 'add_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 名称上一行
     */
    nameTop() {
      const { add_one: { labelGroupName: name } } = this
      return name.length < 3 ? name : name.slice(0, 2)
    },

    /**
     * 名称下一行
     */
    nameBottom() {
      const { add_one: { labelGroupName: name } } = this
      return name.length < 3 ? '' : name.slice(2)
    },
  },
}
</script>
